<template>
  <div class='container' style="padding: 20px;">
    <el-card>
      <el-row type="flex" align="middle">
        <el-col :span="20" style="padding-left: 20px;">
        <span style="color:#606266;font-size: 14px;width: 80px;height: 32px;font-weight: 700">关键字</span>
        <el-input v-model="keywords" placeholder="根据编号搜索" style="width:230px;padding-left: 15px;" size="small"></el-input>
        </el-col>
        <el-col :span="4" style="padding-left: 50px;">
          <el-button type="plain" size="small" style="width: 56px;" @click="clear">清除</el-button>
          <el-button type="primary" size="small" style="width: 56px;" @click="search">搜索</el-button>
        </el-col>
      </el-row>
      <el-row style="background-color: #f4f4f5;color: #909399;font-size: 13px;margin-top: 25px;height: 30px;line-height: 30px;padding-left: 10px;"> 
        <i class="el-icon-info"></i>
        <span style="margin-left: 8px;">数据一共{{allData.counts}}条</span>
      </el-row>
      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="210">
      </el-table-column>
      <el-table-column
        prop="questionType"
        label="题型"
        width="80">
        <template v-slot="{row}">
        {{row.questionType | status}}
        </template>
      </el-table-column>
      <el-table-column
        prop="questionIDs"
        label="题目编号"
        width="210px">
        <template v-slot="{row}">
          <a href="#" v-for="(el,index) in row.questionIDs" :key="index" style="color:#0099ff" @click="onOpen(row)">{{el.number}}</a>
        </template>
      </el-table-column>
      <el-table-column
        prop="addTime"
        label="录入时间"
        width="180px">
      </el-table-column>  <el-table-column
        prop="totalSeconds"
        label="答题时间(s)"
        width="109px">
      </el-table-column>  <el-table-column
        prop="accuracyRate"
        label="正确率(%)"
        width="109px">
      </el-table-column>  <el-table-column
        prop="userName"
        label="录入人"
        width="109px">
      </el-table-column>  <el-table-column
        label="操作"
        width="80px">
        <template v-slot="{row}">
          <el-button type="plain" icon="el-icon-delete" circle size="small" class="delete" @click="remove(row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block page">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[20, 30, 50, 100]"
      :page-size="pagesize"
      layout=" prev, pager, next,sizes, jumper"
      :total="allData.counts">
    </el-pagination>
  </div>
    </el-card>
    <PreviewVue :id="id" v-if="dialogVisible" :dialogVisible.sync="dialogVisible" :lists="lists"></PreviewVue>
  </div>
</template>

<script>
import PreviewVue from './components/preview.vue';
import { randoms, removeRandoms,detail,list } from '../../api/hmmm/questions.js'
export default {
  components: {
    PreviewVue
  },
  data() {
    return {
        keywords:'',
        currentPage: 1,
        tableData: [],
        allData: [],
        pagesize:20,
      dialogVisible: false,
      id: undefined,
        lists:{}
    }
  },
  created () {
    this.randoms()
  },
  methods: {
      async handleSizeChange(val) {
      this.pagesize = val
      const { data } = await randoms({ pagesize: val })
        this.tableData = data.items
      },
      async handleCurrentChange(val) {
        this.currentPage = val
        const { data } = await randoms({ page: val })
        this.tableData = data.items
    },
    clear () {
      this.keywords=''
    },
    async randoms () {
      const {data} = await randoms()
      this.tableData = data.items
      this.allData=data
    },
    remove (row) {
      console.log(row);
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(async action => {
        await removeRandoms(row)
        this.$message.success('删除成功')
      this.randoms()
      }).catch(() => {
        this.$message.failed('删除失败')
      });
      
    },
    async search () {
      if (this.keywords.trim() === '') {
        this.randoms()
      }
      else {
        const { data } = await randoms({ keyword: this.keywords.trim(), page: 1 })
        this.currentPage=1
        this.tableData = data.items
        this.allData = data
      }
    },
    async onOpen (row) {
      this.dialogVisible=true
      // const res = await detail(row)
      const {data:{items}} = await list(row)
      const random = Math.floor(Math.random()*items.length)
      const data = await detail(items[random])
      this.lists = data.data
    console.log(data.data);
    }
    }
}
</script>

<style scoped lang='less'>
.container{
  .page{
  display: flex;
  justify-content: flex-end;
}
  .delete{
    color: red;
    border: 1px solid pink;
    background-color: #fef0f0;
    &:hover{
      color: #fff;
      background-color: #f56c6c;
    }
  }
} 
</style>
